加载 Rive 文件(Loading Rive Files)
新版 Runtime(推荐)
统一通过 useRiveFile(...) 加载,然后把返回的 riveFile 传给 RiveView file={riveFile}。
支持 4 种来源:
require()(推荐,便于开发与 OTA)- URL
- 资源名(native bundle)
- ArrayBuffer
方式 1:require()
const { riveFile, isLoading, error } = useRiveFile(require('./assets/flying_car.riv'));
同时确保 metro.config.js 支持 .riv:
config.resolver.assetExts.push('riv');
方式 2:URL
const { riveFile } = useRiveFile('https://cdn.rive.app/animations/vehicles.riv');
方式 3:resource name
const { riveFile } = useRiveFile('weather_app'); // weather_app.riv
- iOS:把
.riv加入 Xcode target 资源 - Android:放入
android/app/src/main/res/raw
方式 4:ArrayBuffer
const buffer = await (await fetch(url)).arrayBuffer();
const { riveFile } = useRiveFile(buffer);
Legacy Runtime
Legacy <Rive /> 对应方式:
url="..."resourceName="..."source={require('./file.riv')}
Expo 项目可结合 expo-asset + Metro .riv 扩展完成打包。